<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">

          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">

                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn" id="add" ><i class="layui-icon"></i>添加</button>
                </div>
                <div class="layui-card-body layui-table-body layui-table-main">
                    <table id="demo" lay-filter="test"></table>
                </div>
                <div class="layui-card-body ">

                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="alert">提醒余额不足</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
<script src="/lib/layui/layui.all.js" charset="utf-8"></script>
<script src="/js/api.js"></script>
<script  th:inline="javascript">
    var element = layui.element;
    var table = layui.table;
    var layer = layui.layer;
    var form = layui.form;
    var $ = layui.jquery;
    table.render({
        elem: '#demo',
        url:'/user/list',
        method:'post',
        where:{
            role:"ADMIN",
            permissions:"1"
        },
        parseData: function(res){ //res 即为原始返回的数据
            return {
                "code": res.code, //解析接口状态
                "msg": res.message, //解析提示文本
                "count": res.totalPages, //解析数据长度
                "data": res.data.content //解析数据列表
            };
        },
        cols: [
            [{type:'numbers'}
                ,{field: 'id', title: 'ID', width: 200}
                , {field: 'loginName', title: '用户名', width: 150}
                , {field: 'mobile', title: '手机号', width: 150}
                , {field: 'password', title: '密码', width: 150}
                , {field: 'sex', title: '性别', width: 100}
                , {field: 'school', title: '学校', width: 150}
                , {field: 'campusCard', title: '校园卡', width: 150}
                , {field: 'integral', title: '积分', width: 100,sort:true}
                , {field: 'amount', title: '余额', width: 100,sort:true}
                , {field: 'alipay', title: '支付宝', width: 100}
                , {field: 'wechat', title: '微信', width: 100}
                , {field: 'bankCard', title: '银行卡', width: 200}
                ,{fixed: 'right', width:300, align:'right', toolbar: '#barDemo'}
            ]
        ]

        , skin: 'line'//表格风格
        , title:"分类"
        , even: true
        , page: true //是否显示分页
        , limits: [5, 7, 10]
        , limit: 5 //每页默认显示的数量
    });

    $('#add').on("click",function(){

        $('#loginName').val("");
        $('#id').val("");
        $('#mobile').val("");
        $('#sex').val("");
        $('#school').val("");
        $('#campusCard').val("");
        $('#parentId').val("");
        $('#integral').val(0);
        $('#amount').val(0);
        $('#alipay').val("");
        $('#wechat').val("");
        $('#bankCard').val("");
        layer.open({
            title:"添加用户",
            //调整弹框的大小
            area:['700px','600px'],
            shadeClose:true,//点击旁边地方自动关闭
            //动画
            anim:2,
            //弹出层的基本类型
            type: 1,
            //刚才定义的弹窗页面
            content: $('#form'), //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']

        });
    });

    //监听行工具事件
    table.on('tool(test)', function(obj){
        var data = obj.data;
        console.log(form)

        if(obj.event === 'del'){
            layer.confirm('真的删除行么',async function(index){
                obj.del();
                const  result = await requests(`/user/del?id=${obj.data.id}`);
                if (result.isSuccess){
                    layer.msg("删除成功",{icon: 1,time:1000 });
                }
                layer.close(index);
            });
        } else if(obj.event === 'edit'){
            //表单回显

            $('#loginName').val(obj.data.loginName);
            $('#id').val(obj.data.id);
            $('#mobile').val(obj.data.mobile);
            $('#password').val(obj.data.password);
            $('#sex').val(obj.data.sex);
            $('#school').val(obj.data.school);
            $('#campusCard').val(obj.data.campusCard);
            $('#integral').val(obj.data.integral);
            $('#amount').val(obj.data.amount);
            $('#alipay').val(obj.data.alipay);
            $('#wechat').val(obj.data.wechat);
            $('#bankCard').val(obj.data.bankCard);

            layer.open({
                title:"添加用户",
                //调整弹框的大小
                area:['800px','600px'],
                shadeClose:true,//点击旁边地方自动关闭
                //动画
                anim:2,
                //弹出层的基本类型
                type: 1,
                //刚才定义的弹窗页面
                content: $('#form'), //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']

            });
        }else if (obj.event === 'alert'){
            send(obj.data.loginName,"余额不足，请尽快充值");
            layer.msg("提醒成功",{icon:1})
        }
    });

    //监听提交
    form.on('submit(formSubmit)',async function(data){

        const subData = data.field;
        //自定义验证规则

        const result = await requests("/user/save","POST",subData);
        console.log(result);
        if (result){
            layer.msg("提交成功",{icon: 1,time:1000 });
        }
    });

    form.render();

    var websocket = null;

    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        websocket = new WebSocket("ws://localhost:8080/socket/admin");
    }else{
        alert('Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function(){
        setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    websocket.onopen = function(event){
        setMessageInnerHTML("open");
    }

    //接收到消息的回调方法
    websocket.onmessage = function(event){
        setMessageInnerHTML(event.data);
        alert(event.data+"来消息啦");

    }

    //连接关闭的回调方法
    websocket.onclose = function(){
        setMessageInnerHTML("close");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML){
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //关闭连接
    function closeWebSocket(){
        websocket.close();
    }

    //发送消息
    async function send(userName,message){
        await requests(`/socket?userName=${userName}&message=${message}`)
        //websocket.send(message);
    }
</script>
<div style="display: none; margin-top:20px" id="form" class="form">
    <form class="layui-form" lay-filter="storeForm">
        <div style="display: none" class="layui-form-item">
            <label class="layui-form-label">用户ID</label>
            <div class="layui-input-inline">
                <input type="text" id="id" name="id"  autocomplete="off" placeholder="id" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户昵称</label>
            <div class="layui-input-inline">
                <input type="text" id="loginName" name="loginName" lay-verify="title" autocomplete="off" placeholder="请输入用户昵称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" id="password" name="password" lay-verify="title" autocomplete="off" placeholder="请输入密码" class="layui-input">
            </div>
        </div>
        <!--        <div class="layui-form-item">-->
        <!--            <label class="layui-form-label">角色</label>-->
        <!--            <div class="layui-input-inline">-->
        <!--                <select id="category-select" style="display: block"  class="layui-input" name="role" lay-filter="aihao">-->
        <!--                    <option value="ADMIN">管理员</option>-->
        <!--                    <option value="CUSTOM">用户</option>-->
        <!--                </select>-->
        <!--            </div>-->
        <!--        </div>-->
        <div class="layui-form-item ">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="text" name="mobile" id="mobile" placeholder="请输入手机号" lay-verify="title" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <input type="text" id="sex" name="sex" lay-verify="title" autocomplete="off" placeholder="请输入性别" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">学校</label>
            <div class="layui-input-inline">
                <input type="text" id="school" name="school" lay-verify="title" autocomplete="off" placeholder="请输入学校" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">校园卡</label>
            <div class="layui-input-inline">
                <input type="text" id="campusCard" name="campusCard" lay-verify="title" autocomplete="off" placeholder="请输入校园卡" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">积分</label>
            <div class="layui-input-inline">
                <input type="number" id="integral" name="integral" lay-verify="title" autocomplete="off" placeholder="请输入积分" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">余额</label>
            <div class="layui-input-inline">
                <input type="number" id="amount" name="amount" lay-verify="title" autocomplete="off" placeholder="请输入余额" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">支付宝</label>
            <div class="layui-input-inline">
                <input type="text" id="alipay" name="alipay" lay-verify="title" autocomplete="off" placeholder="请输入支付宝" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">微信</label>
            <div class="layui-input-inline">
                <input type="text" id="wechat" name="wechat" lay-verify="title" autocomplete="off" placeholder="请输入微信" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">银行卡</label>
            <div class="layui-input-inline">
                <input type="text" id="bankCard" name="bankCard" lay-verify="title" autocomplete="off" placeholder="请输入银行卡" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formSubmit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
</div>
</html>